<template>
  <div class="container">
    <div class="form-content">
      <a-form layout="inline">
        <a-form-item label="时间范围">
          <a-range-picker v-model:value="timeRange" />
        </a-form-item>
        <a-form-item label="简历状态">
          <a-select
            allowClear
            v-model:value="resumeStatus"
            mode="multiple"
            style="width: 200px"
            placeholder="请选择简历状态"
            :options="[
              { value: '待审核', label: '待审核' },
              { value: '已通过', label: '已通过' },
              { value: '未通过', label: '未通过' },
            ]"
            @change="handleChange"
          ></a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" class="search-botton" @click="search">搜索</a-button>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="table-content">
      <a-table
        class="table"
        :columns="columns"
        :data-source="store.resumeList"
        :loading="loading"
        :scroll="{ x: 1500, y: 650 }"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <div v-if="column.key === 'path'">
            <a-button type="link" size="small" @click="handlePreview(record)">{{
              record?.path?.slice(record?.path?.lastIndexOf('/') + 1)
            }}</a-button>
          </div>
          <div v-if="column.key === 'operation'">
            <a-button type="link" size="small" @click="handlePass(record)">发起面试流程</a-button>
            <!-- <a-button type="link" size="small" @click="handleReject(record)">不通过</a-button> -->
          </div>
        </template>
      </a-table>
    </div>
    <div class="page-content">
      <a-pagination
        v-if="store.total > 0"
        v-model:page-size="store.pageSize"
        :page-size-options="['10', '20', '50']"
        :total="store.total"
        :show-total="total => `共 ${total} 条`"
        show-size-changer
        @change="onPageChange"
      >
      </a-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useResumeStore } from '@/stores/resumeStore'
import { message } from 'ant-design-vue'
import server from '@/api/index' //

const store = useResumeStore()

const timeRange = ref([])
const resumeStatus = ref([])

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 100,
    fixed: 'left',
  },
  {
    title: '用户姓名',
    dataIndex: 'userName',
    key: 'userName',
    width: 150,
  },
  {
    title: '应聘岗位',
    dataIndex: 'jobIntention',
    key: 'jobIntention',
    width: 150,
  },
  {
    title: 'base地',
    dataIndex: 'location',
    key: 'location',
    width: 150,
  },
  {
    title: '论文',
    dataIndex: 'paper',
    key: 'paper',
    width: 150,
  },
  {
    title: '个人技能',
    dataIndex: 'personSkill',
    key: 'personSkill',
    width: 150,
  },
  {
    title: '项目经验',
    dataIndex: 'projectExperience',
    key: 'projectExperience',
    width: 150,
  },
  {
    title: '工作经历',
    dataIndex: 'workExperience',
    key: 'workExperience',
    width: 150,
  },
  {
    title: '简历匹配度',
    dataIndex: 'level',
    key: 'level',
    width: 150,
  },
  {
    title: '简历',
    dataIndex: 'path',
    key: 'path',
    width: 300,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 150,
  },
]

const search = () => {
  console.log(timeRange.value, resumeStatus.value)
  // 调用接口搜索数据
  fetchResumes()
}

const reset = () => {
  timeRange.value = []
  resumeStatus.value = []
  store.page = 1
  store.pageSize = 20
  // 重置后重新获取数据
  getResumeList()
}

const handlePreview = async record => {
  try {
    const url =
      'http://localhost:8101/api/profile/preview/' +
      record?.path?.slice(record?.path?.lastIndexOf('/') + 1)
    window.open(url)
  } catch (error) {
    message.error(error)
  }
}

const handlePass = async record => {}
const handleChange = () => {
  // 筛选条件改变时触发搜索
  search()
}

const getResumeList = async () => {
  try {
    const res = await server.getListProfileVOByPage({
      current: store.page,
      pageSize: store.pageSize,
    })
    if (res?.data.code === 0) {
      store.resumeList = res.data.data.records
      store.total = res.data.data.total
    } else {
      message.error(res.data.message)
    }
  } catch (e) {
    console.log(e)
    message.error(e)
  } finally {
  }
}

const onPageChange = (page, pageSize) => {
  store.page = page
  store.pageSize = pageSize
  getResumeList()
}

onMounted(() => {
  getResumeList()
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .form-content {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0;

    .search-botton {
      margin-right: 10px;
    }
  }

  .table-content {
    padding: 15px;
  }

  .page-content {
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
  }
}
</style>
